<template>
  <div>
    <!-- <div>
      <el-row :gutter="10">
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <div>订单状态 :</div>
          </div>
        </el-col>
        <el-col :span="22">
          <div class="grid-content bg-purple-light">
            <el-button type="small">全部</el-button>
            <el-button size="mini">待付款</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
          <div class="grid-content bg-purple">
            <div>下单日期 :</div>
          </div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="4" :lg="9" :xl="1">
          <div class="grid-content bg-purple-light">
            <el-button>全部</el-button>
          </div>
        </el-col>
      </el-row>
     
    </div> -->

    <!-- <div class="block">
      <el-row  :gutter="20">  
        <el-col :span="24">
          <el-row>
            <el-col :span="2" style=";margin-top:.5rem;">
              <span style="font-size:.9rem">订单状态：</span>
            </el-col>
            <el-col :span="22">
              <el-button :type="query.button.css.status.all" size="small" @click.native="queryByState('all')" >全部</el-button>
              <el-button  size="mini" :type="query.button.css.status.unPay" @click.native="queryByState('unPay')">待付款 &nbsp;<el-tag type="success"  size="mini">{{tableData}}</el-tag></el-button>
              <el-button  size="mini" :type="query.button.css.status.unSend" @click.native="queryByState('unSend')">待发货&nbsp;<el-tag type="danger"  size="mini">{{query.button.tag.unSend}}</el-tag></el-button>
              <el-button  size="mini" :type="query.button.css.status.sended" @click.native="queryByState('sended')">已发货&nbsp;<el-tag type="info"  size="mini">{{query.button.tag.sended}}</el-tag></el-button>
              <el-button  size="mini" :type="query.button.css.status.finished" @click.native="queryByState('finished')">已完成&nbsp;<el-tag type="info"  size="mini">{{query.button.tag.finished}}</el-tag></el-button>
              <el-button  size="mini" :type="query.button.css.status.cancel" @click.native="queryByState('cancel')">已取消&nbsp;<el-tag type="info"  size="mini">{{query.button.tag.cancel}}</el-tag></el-button>
              <el-button  size="mini" :type="query.button.css.status.refundIng" @click.native="queryByState('refundIng')">退款中&nbsp;<el-tag type="danger"  size="mini">{{query.button.tag.refundIng}}</el-tag></el-button>
              <el-button  size="mini" :type="query.button.css.status.refund" @click.native="queryByState('refund')">已退款&nbsp;<el-tag type="info"  size="mini">{{query.button.tag.refund}}</el-tag></el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style=";margin-top:.5rem;">
              <span style="font-size:.9rem;">下单日期：</span>
            </el-col>
            <el-col :span="22">
              <el-button size="small" :type="query.button.css.date.all"  @click.native="queryByDate('all')">全部</el-button>
              <el-button  size="small" :type="query.button.css.date.today"  @click.native="queryByDate('today')">今天</el-button>
              <el-button  size="small" :type="query.button.css.date.yesterday"  @click.native="queryByDate('yesterday')">昨天</el-button>
              <el-button  size="small" :type="query.button.css.date.seven"  @click.native="queryByDate('seven')">最近7天</el-button>
              <el-button  size="small" :type="query.button.css.date.thirty"  @click.native="queryByDate('thirty')">最近30天</el-button>
              <el-button  size="small" :type="query.button.css.date.month"  @click.native="queryByDate('month')">本月</el-button>
              <el-button  size="small" :type="query.button.css.date.year"  @click.native="queryByDate('year')">本年</el-button>
              <el-button  size="small" :type="query.button.css.date.customer"  @click.native="queryByDate('customer')">自定义</el-button>
              <el-date-picker
                v-show="query.button.showCustomer"
                v-model="orderDate"
                size="mini"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="截至日期">
              </el-date-picker>
            </el-col>
          </el-row>
          <br>
        </el-col>
        <el-col :span="4">
          <el-input v-model="listQuery.mobile" size="mini" placeholder="手机号"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="listQuery.orderSn" size="mini" placeholder="订单号"></el-input>
        </el-col>

      </el-row>
    </div> -->
    <supertable
      class="bannertable"
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="false"
      :ispagination="false"
    >
      <!-- 手机号 -->
      <template v-slot:mobile="row">
        <div>
          <!-- {{row.row}} -->
          <!-- #/shopUserDetail?id=3 -->
          <!-- <a href="">{{row.row.mobile}}</a>
           -->
          <router-link
            :to="{ path: 'detail?id=' + row.row.id }"
            class="orderDetailClickCss"
          >
            {{ row.row.mobile }}
          </router-link>
        </div>
      </template>
      <!-- 订单号 -->
      <template v-slot:orderSn="row">
        <div class="orderDetailClickCss">
          <!-- <router-link  @click="orderDetailQuerry(row)" :to="{path:'orderDetail?orderSn='+row.row.orderSn}">
            {{row.row.orderSn}}
          </router-link> -->
          <a @click="orderDetailQuerry(row)">
            {{ row.row.orderSn }}
          </a>
        </div>
      </template>
      <!-- 操作 -->
      <!--<el-dropdown-item v-if="scope.row.statusName === '待付款'">修改订单</el-dropdown-item>-->

      <template v-slot:isoperation="row">
        <div>
          <el-dropdown split-button size="small" type="primary">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="addCommentFn(row.row.id)"
                >订单备注{{ row.row.id }}</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.row.statusName === '已发货'"
                @click.native="viewShippingInfo(row.row)"
                >物流信息
              </el-dropdown-item>
              <el-dropdown-item v-if="row.row.statusName === '待发货'"
                >立即发货</el-dropdown-item
              >
              <el-dropdown-item
                v-if="
                  row.row.payStatusName === '已付款' &&
                    row.row.statusName !== '已退款' &&
                    row.row.statusName !== '退款中'
                "
                >立即退款</el-dropdown-item
              >
              <el-dropdown-item @click.native="viewLog(row.row.id)"
                >操作日志</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <div>请输入备注信息</div>
            <el-input
              class="remarksInput"
              v-model="remarksInputList"
            ></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addRemarksInterfaceFn(row.row.id)"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <el-dialog
          title="提示"
            :visible.sync="logVisible"
            width="30%"
            :before-close="handleClose"
          >

          </el-dialog>
          <!-- <el-dropdown size="small" split-button type="primary"> -->
          <!-- 操作 -->
          <!-- <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="addComment(row.row.id)"
                >订单备注</el-dropdown-item
              >
              <el-dropdown-item
                v-if="scope.row.statusName === '已发货'"
                @click.native="viewShippingInfo(row.row)"
                >物流信息
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.statusName === '待发货'"
                @click.native="openSendOutForm(row.row.id)"
                >立即发货
              </el-dropdown-item>
              <el-dropdown-item
                v-if="
                  scope.row.payStatusName === '已付款' &&
                    scope.row.statusName !== '已退款' &&
                    scope.row.statusName !== '退款中'
                "
              >
                立即退款</el-dropdown-item
              >
              <el-dropdown-item @click.native="viewLog(row.row.id)"
                >操作日志</el-dropdown-item
              >
            </el-dropdown-menu> -->
          <!-- </el-dropdown> -->
        </div>
      </template>
      <template v-slot:formSolt>
        <div>
          <el-input
            placeholder="手机号"
            v-model="input"
            clearable
            class="input"
          >
          </el-input>
          <el-input
            placeholder="订单号"
            v-model="input1"
            clearable
            class="input"
          >
          </el-input>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-search"
            @click="ReviewInterfaceFn()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="reset()"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-document"
            @click="orderExportFn()"
            >导出</el-button
          >
        </div>
      </template>
      <template v-slot:btnSolt>
        <div class="excelBtn"></div>
      </template>
    </supertable>
    <!-- 分页 -->
    <div>
      <el-pagination
        :page-sizes="[10, 20, 50, 100, 500]"
        :pager-count="5"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import supertable from "@/components/supertable";
import {
  CommodityReviewInterface,
  orderExport,
  addComment,
  addRemarksInterface,
  operationRecordInterface
} from "@/api/ShopManagement";

export default {
  name: "CommodityReview",
  data() {
    return {
      addRemarksInterfaceList: [],
      remarksInputList: [],
      exportData: [],
      listLoading: true,
      logVisible:false,
      dialogVisible: false,
      value1: true,
      input: "",
      input1: "",
      pages: 1,
      limit: 10,
      total: 0,
      orderDate: undefined,
      listQuery: {
        page: 1,
        limit: 20,
        mobile: undefined,
        orderSn: undefined,
        status: undefined,
        date: undefined,
        startDate: undefined,
        endDate: undefined
      },
      query: {
        button: {
          lastStatus: "all",
          lastDate: "all",
          showCustomer: false,
          css: {
            status: {
              all: "primary",
              unPay: "default",
              unSend: "default",
              sended: "default",
              finished: "default",
              cancel: "default",
              refundIng: "default",
              refund: "default"
            },
            date: {
              all: "primary",
              today: "default",
              yesterday: "default",
              seven: "default",
              thirty: "default",
              month: "default",
              year: "default",
              customer: "default"
            }
          },
          tag: {
            unPay: 0,
            unSend: 0,
            sended: 0,
            finished: 0,
            cancel: 0,
            refundIng: 0,
            refund: 0
          }
        }
      },
      headerData: [
        {
          prop: "mobile",
          label: "用户",
          width: "180",
          slot: true
        },
        {
          prop: "orderSn",
          label: "订单号",
          width: "200",
          slot: true
        },
        {
          prop: "createTime",
          label: "创建日期",
          width: "180"
        },
        {
          prop: "statusName",
          label: "产品简介",
          width: "180"
        },
        {
          prop: "payStatusName",
          label: "支付状态",
          width: "180"
        },
        {
          prop: "payTypeName",
          label: "支付方式",
          width: "180"
        },
        {
          prop: "Remarks",
          label: "订单备注",
          width: "180"
        },
        {
          prop: "realPrice",
          label: "总金额",
          width: "180"
        },
        {
          prop: "isoperation",
          label: "操作",
          width: "180",
          slot: true
        }
      ],
      tableData: [],
      CommodityReviewInterfaceList: []
    };
  },
  mounted() {
    let _self = this;
    _self.ReviewInterfaceFn();
  },
  methods: {
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 导出
    // orderExportFn() {
    //   let _self = this;
    //   let data = {
    //     limit: _self.limit,
    //     pages: _self.pages
    //   };
    //   orderExport(data).then(res => {
    //     console.log(res);
    //     // window.location.href=  + '/file/download?fileName='+res.data.realFileName
    //     _self.exportData.push({
    //     })
    //   })
    // },
    orderExportFn() {
      let _self = this;
      let data = {
        pageNo: _self.currentpage,
        pageSize: _self.pageSize
      };
      orderExport(data).then(res => {
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([res], { type: "application/vnd.ms-excel" }),
            "导出文件.xls"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([res], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "导出文件.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },

    // exportXls() {
    //   orderApi.exportXls(this.listQuery).then(response => {
    //     window.location.href= getApiUrl() + '/file/download?fileName='+response.data.realFileName
    //   })
    // }
    SpecificationDelete() {},
    // 重置
    reset() {
      let _self = this;
      _self.input = "";
      _self.input1 = "";
      _self.ReviewInterfaceFn();
    },
    // 接口
    ReviewInterfaceFn() {
      let _self = this;
      this.listLoading = true;

      _self.tableData = [];
      let data = {
        mobile: _self.input.trim(),
        orderSn: _self.input1.trim(),
        limit: _self.limit,
        pages: _self.pages
      };
      if (this.orderDate) {
        this.listQuery["startDate"] = this.orderDate[0];
        this.listQuery["endDate"] = this.orderDate[1];
      }
      CommodityReviewInterface(data).then(res => {
        let _self = this;
        this.listLoading = false;

        console.log(res);
        let { records } = res.data;
        _self.total = res.data.total;
        if ((res.code = 20000)) {
          for (let item of records) {
            _self.tableData.push({
              id: item.user.id,
              mobile: item.user.mobile,
              orderSn: item.orderSn,
              createTime: item.createTime,
              statusName: item.statusName,
              payStatusName: item.payStatusName,
              payTypeName: item.payTypeName,
              realPrice: (item.realPrice / 100).toFixed(2),
              payStatusName: item.payStatusName,
              statusName: item.statusName
            });
          }
        }
      });
    },
    // 搜索
    // 分页
    async sizeChange(val) {
      let _self = this;
      _self.limit = val;
      await _self.ReviewInterfaceFn();
    },
    async currentChange(val) {
      let _self = this;
      _self.pages = val;
      await _self.ReviewInterfaceFn();
    },
    queryByState(status) {
      const lastStatus = this.query.button.lastStatus;
      this.query.button.css.status[lastStatus] = "default";
      this.query.button.css.status[status] = "primary";
      this.query.button.lastStatus = status;
      if (status !== "all") {
        this.tableData.status = status;
      } else {
        this.tableData.status = "";
      }
      this.ReviewInterfaceFn();
    },
    queryByDate(date) {
      const lastDate = this.query.button.lastDate;
      this.query.button.css.date[lastDate] = "default";
      this.query.button.css.date[date] = "primary";
      this.query.button.lastDate = date;
      if (date !== "all" && date !== "customer") {
        this.listQuery.date = date;
      } else {
        this.listQuery.date = "";
      }
      if (date === "customer") {
        this.query.button.showCustomer = true;
        return;
      } else {
        this.query.button.showCustomer = false;
      }
      this.ReviewInterfaceFn();
    },
    orderDetailQuerry(row) {
      let _self = this;
      console.log(row.row.orderSn);
      _self.$router.push({
        name: "orderDetail",
        query: {
          orderSn: row.row.orderSn
        }
      });
    },
    // 订单备注
    addCommentFn(id) {
      let _self = this;
      _self.dialogVisible = !_self.dialogVisible;
      if (_self.dialogVisible) {
        addComment(data).then(res => {
          _self.remarksInputList = [];
          _self.remarksInputList = res.data;
        });
      }
      console.log(id);
    },
    // 提交备注
    addRemarksInterfaceFn(id) {
      let _self = this;
      let data=_self.input.trim()
      // addRemarksInterface(id).then(res => {
      //   if (_self.dialogVisible) {
      //     _self.addRemarksInterfaceList=[]
      //     _self.addRemarksInterfaceList=res.data
      //   }
      // });

      console.log(res.data);
      _self.dialogVisible = false;
      _self.remarksInputList = "";
    },
    viewLog(){
      this.logs = []
      this.logVisible = true
      orderApi.getLogs(id).then(response => {
        this.logs = response.data
      })
      operationRecordInterface().then(res={
        
      })
    },

    // 物流信息
    viewShippingInfo() {
      let _self = this;
      _self.$message("服务异常,请联系管理员");
    }
  },
  components: {
    supertable
  }
};
</script>
<style lang="">
.input {
  margin: 20px;
  width: 400px;
}
.el-image {
  width: 50px;
  height: 50px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.orderDetailClickCss {
  color: #74d6f5;
  cursor: pointer;
  text-decoration: none;
}
.remarksInput {
  width: 65%;
}
</style>
